<template>
  <a-modal :open="open" width="700px" title="执行地点" centered ok-text="保存" @ok="onOk" @cancel="onCancel">
    <div class="bg-secondary w-full p-4 rounded-md border border-solid border-primary">
      <div class="flex items-center mt-2">
        <LabelValue label="项目名称" :width="240" value-class="font-bold text-primary" :value="`${formState?.mc}，${formState?.gg}`" />
        <LabelValue label="单位" :width="240" :value="formState?.dw" />
        <LabelValue label="单价" :width="120" :value="formState?.dj" />
        <LabelValue label="状态" :width="120" :value="formState?.yxzt === 1 ? '停用' : '有效'" />
      </div>
      <div class="flex items-center mt-2">
        <LabelValue label="项目类别" :width="240" :value="formState?.lbmc" />
        <LabelValue label="执行科室" :width="240" :value="formState?.ksmc" />
        <LabelValue label="项目编号" :width="240" :value="formState?.bh" />
      </div>
    </div>
    <div>
      <a-form :model="formState" class="form-style-flex" :label-col="{ style: { width: '70px' } }">
        <a-form-item label="执行地点" class="w-full mt-2">
          <a-textarea v-model:value="formState.executionLocation" :rows="4" placeholder="请输入" />
        </a-form-item>
      </a-form>
    </div>
  </a-modal>
</template>
<script setup>
import { ref, watch } from 'vue'
import { message } from 'ant-design-vue'
import { post } from '@/utils/request'

const emit = defineEmits(['update:open', 'success'])
const props = defineProps({
  open: Boolean,
  rowData: {
    type: Object,
    default: () => ({})
  }
})
const formState = ref({ dpJe: '' })

const onOk = async () => {
  const { code, msg } = await post('/operation/opex/doExecutionLocation', { ...formState.value })
  if (code !== 0) return message.error(msg)
  message.success('保存成功')

  emit('success')
  onCancel()
}

const onCancel = () => {
  emit('update:open', false)
}

watch(
  () => props.open,
  (val) => {
    if (val) {
      formState.value = { ...props.rowData }
    }
  },
  { immediate: true }
)
</script>

<style lang="less" scoped>
.ant-tag-checkable-checked {
  color: #fff;
  background-color: var(--primary-color);
}
</style>
